<template>
  <div class="itxst">
    <div>
      <!-- 标题栏 -->
      <div class="header">
        <span class="header-item">视频封面</span>
        <span class="header-item">视频标题</span>
        <span class="header-item" v-if="props.status.viewing_permission != 1"
          >试看</span
        >
        <span class="header-item">上传时间</span>
        <span class="header-item">操作</span>
      </div>

      <draggable
        itemKey="id"
        :list="list"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
        @start="onStart"
        @end="onEnd"
      >
        <template #item="{ element }">
          <div class="item">
            <span
              class="item-name"
              :class="{ widthStyle: props.status.viewing_permission == 1 }"
            >
              <ProcessedImage
                v-if="!element.cover"
                :src="'https://b.gaokaow.cc/no-cover.png'"
                params="imageView2/2/h/86"
              />
              <ProcessedImage
                v-else
                :src="element.cover"
                params="imageView2/2/h/86"
              />
            </span>
            <span
              class="item-name"
              :class="{ widthStyle: props.status.viewing_permission == 1 }"
              >{{ element.name }}</span
            >
            <span
              class="item-name"
              :class="{ widthStyle: props.status.viewing_permission == 1 }"
              v-if="props.status.viewing_permission != 1"
            >
              <el-switch v-model="element.tryLook" class="ml-2" />
            </span>
            <span
              class="item-name"
              :class="{ widthStyle: props.status.viewing_permission == 1 }"
              >{{ element.create_time }}</span
            >
            <span
              class="item-name"
              :class="{ widthStyle: props.status.viewing_permission == 1 }"
            >
              <Rank class="icon" />
              <EditPen @click="saveEditBtn(element)" class="icon" />
              <Delete @click="detele(element)" class="icon" />
            </span>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup>
import draggable from 'vuedraggable';
const emit = defineEmits(['editOperation', 'saveDelele', 'updateList']);
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  status: {
    type: Object,
    default: () => {},
  },
});
// 拖拽开始的事件
const onStart = () => {
  // console.log('开始拖拽', e.item);
};
// 拖拽结束的事件
const onEnd = () => {
  const id = event.newIndex;
  //删除旧的位置的item保存起来
  const movedItem = props.list.splice(event.oldIndex, 1)[0];
  // 将该元素插入到新的位置
  props.list.splice(event.newIndex, 0, movedItem);
  emit('updateList', { list: props.list, id: id });
};

//删除
const detele = (row) => {
  emit('saveDelele', row);
};
const saveEditBtn = (row) => {
  emit('editOperation', row);
};
</script>

<style lang="scss" scoped>
.itxst {
  background-color: #fff !important;
}

.header {
  display: flex;
  font-weight: bold;
  background-color: rgb(250, 250, 250);
  padding: 10px 0;
}

.header-item {
  flex: 1 1 20%; /* 设置为20%宽度 */
  text-align: center;
  color: #86909c;
  font-size: 14px;
}

.item {
  display: flex;
  height: 100px;
  align-items: center;
  background-color: #fff;
}
.item:nth-child(2n) {
  background-color: rgb(250, 250, 250);
}

.item span {
  width: 20%; /* 设置为20%宽度 */
  text-align: center;
}
.item span.widthStyle {
  width: 25% !important; /* 使用 !important 确保优先级 */
}

.item:hover {
  cursor: move;
}

.item + .item {
  margin-top: 10px;
}

.ghost {
  border: solid 1px rgb(19, 41, 239);
}
.item-name {
  color: #666;
}

.icon {
  width: 1em;
  height: 1em;
  cursor: pointer;
  margin-left: 10px;
}
</style>
